<template>
  <div class="book-detail-area">
    <div class="middle">
      <bread-crumb class="bread-crumb-padding" :list="breadCrumb"></bread-crumb>
      <div class="top-search flx-row-bw-s">
        <div class="flx-row-s-s">
          <span class="c-d2 f-14 f-w-600" style="margin-top: 6px"
            >商标分类：</span
          >
          <div
            class="flx-row-s-s categary-area"
            :class="{ 'categary-box': !suffixOpen }"
          >
            <div
              class="type-select-item"
              style="margin: 6px 12px"
              v-for="(item, index) in categaryList"
              :key="index"
              :class="[item.select ? 'active' : 'normal']"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div
          class="c-g f-14 flx-row-s-c open-bottom"
          style="margin-top: 6px"
          @click="suffixOpen = !suffixOpen"
        >
          展开
          <div class="icon">
            <div
              class="dir-icon"
              :class="{ 'dir-icon-active': suffixOpen }"
            ></div>
          </div>
        </div>
      </div>
      <div class="box" style="position: relative">
        <Spin :withIcon="true" v-if="loading"></Spin>
        <div class="list-area flx-row-s-c">
          <div
            class="list-item flx-col"
            v-for="(item, index) in list"
            :key="index"
            :class="{ 'm-r': (index + 1) % 4 != 0 }"
          >
            <div class="image" v-lazy:background-image=""></div>
            <div class="bottom-area">
              <h3>域名SSL证书</h3>
              <div class="flx-row-bw-c" style="margin-top: 10px">
                <span class="f-14 c-o">3000积分</span>
                <div
                  class="big-button-size-40 user-normal-button"
                  style="width: 88px; min-width: 88px"
                >
                  兑换
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flx-row-e-c" style="margin-top: 30px">
          <Page
            :total="total"
            :current="page"
            :page-size="pageSize"
            :page-size-opts="pageSizeOpts"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            show-elevator
            show-sizer
            show-total
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      loading: false,
      breadCrumb: [{ name: "积分商城", to: "/pointsmall" }],
      categaryList: [
        { name: "实物", select: true },
        { name: "数字资产", select: false },
      ],
      suffixOpen: false,
      // 分页设置
      total: null,
      pageSizeOpts: [50, 100, 200],
      pageSize: 50,
      page: 1,
      list: [1, 2, 3, 4, 5, 2, 3, 4],
    };
  },
  mounted() {},
  methods: {
    pageSizeChange() {},
    pageChange() {},
  },
};
</script>

<style lang="scss" scoped>
.book-detail-area {
  background-color: #f7f7f7;
  padding-bottom: 20px;

  .top-search {
    background-color: #fff;
    padding: 20px 30px;
    border: 1px solid #eaeaea;
    margin-bottom: 15px;
  }
  .categary-box {
    height: 33px;
    overflow: hidden;
  }
  .categary-area {
    width: 1010px;
    flex-wrap: wrap;
  }
  .type-select-item {
    font-weight: 400;
    transition: color 0.3s, font-weight 0.3s;
    margin-right: 25px;
    cursor: pointer;

    &.normal {
      @include h-c(null, null, rgba($color: #3d3d3d, $alpha: 0.8), #f9521f);
    }
    &.active {
      font-weight: 600;
      color: #f9521f;
    }
  }
  .open-bottom {
    cursor: pointer;
    .icon {
      width: 15px;
      padding-left: 3px;

      .dir-icon {
        @include size(12px, 6px);
        @include bg-setting("g-down");
        transform: rotate(0);
        transition: transform 0.3s, background-image 0.3s;
      }
      .dir-icon-active {
        transform: rotate(-180deg);
      }
    }

    &:hover {
      color: #f9521f;

      .dir-icon {
        @include bg-setting("o-down");
      }
    }
  }
  .box {
    background-color: #fff;
    border: 1px solid #eaeaea;
    padding: 30px 25px;
    margin-bottom: 15px;
  }
  .list-area {
    min-height: 160px;
    flex-wrap: wrap;

    .list-item {
      width: 280px;
      height: 386px;
      border: 1px solid #dcdcdc;
      transition: box-shadow 0.3s;
      margin-bottom: 10px;
      &:hover {
        @include b-sh;
      }

      .image {
        @include bg-setting(null, cover, center);
        @include size(100%, 276px);
        background-color: #ededed;
        border: 1px solid #ededed;
        transition: opacity 0.3s;
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }
      }
      .bottom-area {
        height: 109px;
        width: 100%;
        padding: 18px 16px;

        h3 {
          width: 100%;
          @include f-ell-sin;
        }
      }
    }
  }
}
.m-r {
  margin-right: 9px;
}
</style>